<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>在线预审</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8"/>
    <link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css">
    <link rel="stylesheet" href="${re.contextPath}/plugin/lenos/main.css">
<!--    <script type="text/javascript" src="${re.contextPath}/plugin/jquery/jquery-3.2.1.min.js"></script>-->
<!--    <script type="text/javascript" src="${re.contextPath}/plugin/layui-v2.5.4/layui/layui.js"></script>-->
<!--    <script type="text/javascript" src="${re.contextPath}/plugin/tools/tool.js"></script>-->
<!--    <script type="text/javascript" src="${re.contextPath}/plugin/tools/update-setting.js"></script>-->
<!--    <script type="text/javascript" src="${re.contextPath}/plugin/fsLayui/js/fsDict.js?v=2.0.0"></script>-->
</head>

<body>
<div class="lenos-search" style="height:150px;">
    <div class="select">
        <div class="layui-form-item">
            预审编号：
            <div class="layui-inline">
                <input class="layui-input" height="20px" id="approvalNumber" autocomplete="off">
            </div>
            预审部门：
            <div class="layui-inline">
                <select name="approvalDept" id="approvalDept"  class="search_input" style="height:30px;width:120px;" lay-search></select>
            </div>
            预审人员：
            <div class="layui-inline">
                <input class="layui-input" height="20px" id="approvalPerson" autocomplete="off">
            </div>
            用户姓名：
            <div class="layui-inline">
                <input class="layui-input" height="20px" id="filler" autocomplete="off">
            </div>


        </div>
        <div class="layui-form-item">
            用户电话：
            <div class="layui-inline">
                <input class="layui-input" height="20px" id="phone" autocomplete="off">
            </div>
            业务分类：

                <div class="layui-inline">
                    <select name="serviceTypeId" class="search_input" id="serviceTypeId" style="height:30px;width:120px;"lay-search></select>
                </div>

            业务类型：
            <div class="layui-inline">
                <select name="serviceKindId" class="search_input" id="serviceKindId"style="height:30px;width:120px;" lay-search>
                    <option value="">请选择</option>
                </select>
            </div>
            预审状态：
            <div class="layui-inline">
                <select name="approvalStatus" class="search_input" id="approvalStatus"style="height:30px;width:120px;" lay-search></select>
            </div>
        </div>
        <div class="layui-form-item">
            提交日期：
            <div class="layui-inline">
                <input class="layui-input" name="submitDate" height="20px" id="submitDate" placeholder="yyyy-MM-dd" autocomplete="off">
            </div>

            <button class="select-on layui-btn layui-btn-sm" data-type="select"><i class="layui-icon"></i>
            </button>
            <button class="layui-btn layui-btn-sm icon-position-button" id="refresh" style="float: right;"
                    data-type="reload">
                <i class="layui-icon">ဂ</i>
            </button>
        </div>
    </div>

</div>
<div class="layui-col-md12" style="height:40px;margin-top:3px;">
    <div class="layui-btn-group">
        <@shiro.hasPermission name="approval:add">
        <button class="layui-btn layui-btn-normal" data-type="add">
            <i class="layui-icon">&#xe608;</i>新增
        </button>
    </@shiro.hasPermission>
    </div>

</div>
</div>
<table id="approvalList" class="layui-hide" lay-filter="user"></table>
<script type="text/javascript" src="${re.contextPath}/plugin/jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="${re.contextPath}/plugin/layui-v2.5.4/layui/layui.js"></script>
<script type="text/javascript" src="${re.contextPath}/plugin/tools/tool.js"></script>
<script type="text/javascript" src="${re.contextPath}/plugin/tools/update-setting.js"></script>
<script type="text/html" id="toolBar">
    <@shiro.hasPermission name="approval:select">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看详情</a>
    </@shiro.hasPermission>
    {{#  if(d.taskStatus === 0){ }}
    <@shiro.hasPermission name="approval:sign">
    {{# if(d.approvalStatus=== 0){ }}
    <a class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="sign">签收</a>
    {{# } }}
    </@shiro.hasPermission>
    {{#  } }}
    {{# if(d.approvalStatus === 1 ||d.approvalStatus ==0){ }}
    <@shiro.hasPermission name="approval:update">
    <a class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="update">修改
    </@shiro.hasPermission>
    {{# } }}
    {{#  if(d.taskStatus === 1 && d.approvalStatus=== 0){ }}
    <@shiro.hasPermission name="approval:approval">
        <a class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="approval">预审</a>
    </@shiro.hasPermission>
    <@shiro.hasPermission name="approval:unSign">
    <a class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="unSign">解签</a>
    </@shiro.hasPermission>
    {{#  } }}
</script>

<script type="text/html" id="loadServiceKind">
    {{loadName('/kind/get?id='+d.serviceKindId,"name")}}

</script>
<script type="text/html" id="loadServiceType">
    {{loadName('/type/get?id='+d.serviceTypeId,"name")}}

</script>
<script type="text/html" id="loadOffice">
    {{loadName('/office/get?id='+d.approvalDept,"name")}}

</script>
<script type="text/html" id="loadApprovalStatus">
    {{loadName('/dict/loadDictByTypeAndValue?dictType=approval_status&dictValue='+d.approvalStatus,"dictName")}}

</script>
<script type="text/html" id="serviceTypeTpl">

    <option value="">请选择</option>
    {{#layui.each(d.list,function(index,item){ }}
    <option  value="{{item.id}}" {{item.checked==true?'selected':''}} >{{item.name}}</option>
    {{# }); }}
    {{# if(d.list.length==0){ }}
    无数据
    {{# }}}
</script>
<script type="text/html" id="approvalStatusTpl">

    <option value="">请选择</option>
    {{#layui.each(d.list,function(index,item){ }}
    <option  value="{{item.dictValue}}" {{item.checked==true?'selected':''}} >{{item.dictName}}</option>
    {{# }); }}
    {{# if(d.list.length==0){ }}
    无数据
    {{# }}}
</script>
<script type="text/html" id="approvalDeptTpl">
    <option value="">请选择</option>
    {{#layui.each(d.list,function(index,item){ }}
    <option  value="{{item.id}}" {{item.checked==true?'selected':''}} >{{item.name}}</option>
    {{# }); }}
    {{# if(d.list.length==0){ }}
    无数据
    {{# }}}

</script>
<script>
    function loadName(url,val){
        var name="";
        $.ajax({
            type:'GET',
            url:url,
            dataType:'json',
            async: false,
            success:function(res){
                if(res.flag){
                   name = res.jsonObj.data[val];
                }
            },
            error:function(){
                console.log('加载异常')
            }
        });
        return name;

    }


    document.onkeydown = function (e) { // 回车提交表单
        var theEvent = window.event || e;
        var code = theEvent.keyCode || theEvent.which;
        if (code == 13) {
            $(".select .select-on").click();
        }
    }
    layui.use('table', function () {
        var table = layui.table;
        //方法级渲染
        table.render({
            id: 'approvalList',
            elem: '#approvalList'
            , url: 'approvalList'
            , cols: [[
                {checkbox: true, fixed: true, width: '5%'}
                , {field: 'approvalNumber', title: '预审编号', width: '10%'}
                , {field: 'approvalDept', title: '预审部门', width: '15%', sort: true,templet:"#loadOffice"}
                , {field: 'serviceTypeId', title: '业务类型', width: '15%',templet:"#loadServiceType"}
                , {field: 'serviceKindId', title: '业务分类', width: '10%',templet:"#loadServiceKind"}
                , {field: 'approvalStatus', title: '预审状态', width: '10%',templet:'#loadApprovalStatus'}
                , {field: 'submitDate', title: '提交日期', width: '15%',templet:"<div>{{layui.util.toDateString(d.submitDate, 'yyyy-MM-dd')}}</div>"}
                , {field: 'taskStatus', title: '操作', width: '20%', toolbar: "#toolBar"}
            ]]
            , page: true
            ,  height: 'full-83'
        });

        var $ = layui.$, active = {
            select: function () {
                var approvalNumber = $('#approvalNumber').val();
                var approvalDept = $('#approvalDept').val();
                var approvalPerson = $('#approvalPerson').val();
                var filler = $('#filler').val();
                var phone = $('#phone').val();
                var serviceTypeId = $('#serviceTypeId').val();
                var serviceKindId = $('#serviceKindId').val();
                var approvalDept = $('#approvalDept').val();
                var approvalStatus = $('#approvalStatus').val();
                var submitDate = $('#submitDate').val();
                table.reload('approvalList', {
                    where: {
                        approvalNumber: approvalNumber,
                        approvalDept: approvalDept,
                        approvalPerson: approvalPerson,
                        filler: filler,
                        phone: phone,
                        serviceTypeId: serviceTypeId,
                        serviceKindId: serviceKindId,
                        approvalDept: approvalDept,
                        approvalStatus: approvalStatus,
                        submitDate: submitDate
                    }
                })
            },
            reload:function(){
                var approvalNumber = $('#approvalNumber').val('');
                var approvalDept = $('#approvalDept').val('');
                var approvalPerson = $('#approvalPerson').val('');
                var filler = $('#filler').val('');
                var phone = $('#phone').val('');
                var serviceTypeId = $('#serviceTypeId').val('');
                var serviceKindId = $('#serviceKindId').val('');
                var approvalDept = $('#approvalDept').val('');
                var approvalStatus = $('#approvalStatus').val('');
                var submitDate = $('#submitDate').val('');
                table.reload('approvalList', {
                    where: {
                        approvalNumber: null,
                        approvalDept: null,
                        approvalPerson: null,
                        filler: null,
                        phone: null,
                        serviceTypeId: null,
                        serviceKindId: null,
                        approvalDept: null,
                        approvalStatus: null,
                        submitDate: null
                    }
                });
            },
            add: function () {
                add('添加预审信息', '/approval/add');
            }


        };

        //监听表格复选框选择
        table.on('checkbox(user)', function (obj) {
            //console.log(obj)
        });
        //监听工具条
        table.on('tool(user)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                detail('查看预审详情', 'showApproval?id=' + data.id+"&detail=readonly");
            } else if (obj.event === 'approval') {
                /*layer.confirm('确定删除角色[<label style="color: #00AA91;">' + data.roleName + '</label>]?', function(){
                    del(data.id);
                });*/
                 detail('查看预审详情', 'showApproval?id=' + data.id+"&detail=false");
            } else if (obj.event === 'sign') {

                 handleApproval('sign' ,data.id);
            } else if( obj.event === 'unSign'){
                handleApproval('unSign' ,data.id);
            } else if(obj.event === 'update'){
                update('修改预审详情','showApproval?id='+data.id+"&detail=false");
            }
        });

        $('.layui-col-md12 .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        $('.select .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });


    });
    layui.use('laydate',function(){
        var laydate = layui.laydate;
        laydate.render({
            elem:'#submitDate'
            ,trigger:'click'

        });
    });
    layui.use(['laytpl','form'],function(){
            var laytpl = layui.laytpl,form = layui.form;
            loadSelect('/type/loadAllServiceType','serviceTypeTpl','serviceTypeId');
            loadSelect('/dict/loadDict?dictType=approval_status','approvalStatusTpl','approvalStatus');
            loadSelect('/office/loadAllOffice','approvalDeptTpl','approvalDept');
            function loadSelect(url,templateId,divId){
                $.ajax({
                   url:url,
                   type:'get',
                   success:function(res){
                        if(res.flag){
                            var data={},list=[];
                            data.title=res.msg;

                            res.jsonObj.data.forEach(function(value,index){
                                  list.push(value);
                             },this);
                             data.list = list;
                            loadTpl(data,templateId,divId);
                        }
                   },
                   beforeSend:function(){
        <!--              layer.msg('加载中');-->
                   }
                })
          }
          function loadTpl(data,templateId,divId){

            var getTpl = document.getElementById(templateId).innerHTML
                            ,view = document.getElementById(divId);
             laytpl(getTpl).render(data,function(html){
                   view.innerHTML=html;
             });
             form.render('select');


          }


    })
    function del(id) {
        $.ajax({
            url: "del",
            type: "post",
            data: {id: id},
            success: function (d) {
                if(d.msg){
                    layer.msg(d.msg,{icon:6,offset: 'rb',area:['120px','80px'],anim:2});
                    layui.table.reload('approvalList');
                }else{
                    layer.msg(d.msg,{icon:5,offset: 'rb',area:['120px','80px'],anim:2});
                }
            }
        });
    }
    function handleApproval(url,id){
         $.ajax({
            url: url,
            type: "post",
            data: {id: id},
            success: function (d) {
                if(d.msg){
                    layer.msg(d.msg,{icon:6,offset: 'rb',area:['120px','80px'],anim:2});
                    layui.table.reload('approvalList');
                }else{
                    layer.msg(d.msg,{icon:5,offset: 'rb',area:['120px','80px'],anim:2});
                }
            }
        });


    }

    function detail(title, url, w, h) {
        var number = 1;
        if (title == null || title == '') {
            title = false;
        }
        ;
        if (url == null || url == '') {
            url = "/error/404";
        }
        ;
        if (w == null || w == '') {
            w = ($(window).width() * 0.95);
        }
        ;
        if (h == null || h == '') {
            h = ($(window).height() - 50);
        }
        ;
        layer.open({
            id: 'user-detail',
            type: 2,
            area: [w + 'px', h + 'px'],
            fix: false,
            maxmin: true,
            shadeClose: true,
            shade: 0.4,
            title: title,
            content: url + '&detail=true',
            // btn:['关闭']
        });
    }
    /**
     * 更新用户
     */
    function update(title, url, w, h) {
        if (title == null || title == '') {
            title = false;
        }
        if (url == null || url == '') {
            url = "/error/404";
        }
        if (w == null || w == '') {
            w = ($(window).width() * 0.95);
        }
        if (h == null || h == '') {
            h = ($(window).height() - 50);
        }
        layer.open({
            id: 'user-update',
            type: 2,
            area: [w + 'px', h + 'px'],
            fix: false,
            maxmin: true,
            shadeClose: false,
            shade: 0.4,
            title: title,
            content: url + '&detail=false'
        });
    }

    /*弹出层*/
    /*
     参数解释：
     title   标题
     url     请求的url
     id      需要操作的数据id
     w       弹出层宽度（缺省调默认值）
     h       弹出层高度（缺省调默认值）
     */
    function add(title, url, w, h) {
        if (title == null || title == '') {
            title = false;
        }
        ;
        if (url == null || url == '') {
            url = "/error/404";
        }
        ;
        if (w == null || w == '') {
            w = ($(window).width() * 0.95);
        }
        ;
        if (h == null || h == '') {
            h = ($(window).height() - 50);
        }
        ;
        layer.open({
            id: 'user-add',
            type: 2,
            area: [w + 'px', h + 'px'],
            fix: false,
            maxmin: true,
            shadeClose: false,
            shade: 0.4,
            title: title,
            content: url
        });
    }

 $(document).on('change','#serviceTypeId',function(){
      var serviceTypeId = $("#serviceTypeId").val();
      if(serviceTypeId){
        $.ajax({
          url:"/kind/getKindList",
          data:{
            serviceTypeId:serviceTypeId
          },
          type:"get",
          dataType:"json",
          success:function(res){
              if(res.flag){
               $("#serviceKindId").empty();
                   var html="<option value=''>请选择</option>";
                   $(res.jsonObj.data).each(function(v,k){
                      html+="<option value='"+k.id+"'>"+k.name+"</option>";
                    });
                $("#serviceKindId").append(html);
              }
          },
          error:function(){
            console.log("服务器异常");
          }

        });
      }else{
        $("#serviceKindId").empty();
      }
  });
</script>
</body>

</html>
